/*
Theme Name: Yuki
Theme URI: http://yukisuperkingred.com.vn
Author: duyhph
Author URI: http://yukisuperkingred.com.vn
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: http://yukisuperkingred.com.vn

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: "Times New Roman",Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	background: #146ad7 url(images/bg.jpg) repeat-x;
	
	text-align:left;
}
		
a:link, a:visited { color: #a54c77; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #a54c77; text-decoration: underline; }

p,ul,li,div,span { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.clear { clear: both; width: 100%; height: 0px; font-size: 0px;  }



#wrapper-outer {
	max-width:1300px;
	
	margin:auto;
}
#wrapper-inner {
	
	

}
#inner{

margin:auto;
	
}



/* ============================================================================ header ================================================================================*/
#header{
	position:absolute;
	top:0px;
	
}
.menu-more{
		display:none;
}
#header-menu{
border-top:1px solid #c0ecff;
height:48px;
width:1300px;
	background-color:rgb(14,192,255);/* Old browsers */
	background-color: rgba(14,192,255,0.6);
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  rgba(127,222,255,0.7) 0%, rgba(1,186,255,0.7) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(127,222,255,0.7)), color-stop(100%,rgba(1,186,255,0.7))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(127,222,255,0.7) 0%,rgba(1,186,255,0.7) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(127,222,255,0.7) 0%,rgba(1,186,255,0.7) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(127,222,255,0.7) 0%,rgba(1,186,255,0.7) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(127,222,255,0.7) 0%,rgba(1,186,255,0.7) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(127,222,255,0.7)', endColorstr='rgba(1,186,255,0.7)',GradientType=0 ); /* IE6-8 */
	
	border-radius: 20px;
}

nav a:link,nav a:hover, nav a:visited{
	color:#fff;
	text-decoration:none;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}
nav ul li ul {
	background-color:rgba(0,157,254,0.6);
}

nav ul {
	
	padding: 0 10px;	
	list-style: none;
	position: relative;
	display: inline-table;
}
nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
	border-left:1px solid #C8E4F1;
	border-right:1px solid #4BA7EC;
}
nav ul li.first {	
	border-left:none;
}
nav ul li.last {	
	border-right:none;
}
nav ul li.first:hover, nav ul li.last:hover {	
	background: none;
}

nav ul li:hover {
	background: rgba(0,157,254,0.3);
}
nav ul li ul li:hover {
	background: rgba(0,157,254,0.3);
}

nav ul li a#plus {
	display: block; padding: 6px 10px;
	text-decoration: none;
}

nav ul li a {
	display: block; 
	padding: 15px 25px;
	text-decoration: none;
		font-size:2.2em;
}
			
		
nav ul ul {
	 padding: 0;
	position: absolute; top: 100%;
}
nav ul ul li {
	float: none; 
	position: relative;
}
nav ul ul li a {
	padding: 15px 25px;
		font-size:2.2em;
}	

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

#logo,#fish1,#fish2,#fish3,#fish4{
	position: absolute;
}
#logo{
	background: transparent url(images/logo.png) no-repeat;
	width:174px;
	height:122px;
	top: 10px;
}
#fish1{
	background: transparent url(images/fish1.png) no-repeat;
	width:150px;
	height:90px;
	top: 70px;
	margin-left: 249px;
}
#fish2{
	background: transparent url(images/fish2.png) no-repeat;
	width:233px;
	height:78px;
	top: 30px;
	margin-left: 550px;
}
#fish3{
	background: transparent url(images/fish3.png) no-repeat;
	width:215px;
	height:94px;
	top: 70px;
	margin-left: 900px;
}
#fish4{
	background: transparent url(images/fish4.png) no-repeat;
	width:123px;
	height:122px;
	top: 100px;
	margin-left: 1190px;
}
/* ============================================================================ body ================================================================================*/
.bodycontent{
	padding:10px;
	font-size:1.2em;
}
.bodycontent iframe{
	width:100% !important;
}
.customer-name input,.customer-email input,.customer-phone input{
	width:150px;
}
.customer-message textarea{
	width:390px;
}
.customer-submit input{
	float:right;
	background-color: #d20304;
	border: 1px solid #000;
	padding: 5px;
	color: #fff;
	cursor:pointer;
}


.formleft{
	float:left;
	width:200px;
}
.formright{
	float:left;
	margin-right:10px;
	width:400px;
}

.wpcf7-not-valid-tip{
	color: red;
}
/* ============================================================================ left ================================================================================*/
#left{
	width:300px;
	position:absolute;
	margin-right:30px;
}
.blocktitle{
	height:32px;
	background: transparent url(images/bg_block_title.png) no-repeat;
	font-size: 1.6em;
	padding-top: 17px;
	padding-left: 15px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}
.blockitem{
	background-color: rgba(0,12,255,0.15);
	
}
.blockitem a{
	font-size: 1.6em;
	text-decoration: none;
	color:#fff;
	display: block;
	padding: 15px 12px 15px 10px;
}
.blockitem a h2{
	font-size: 0.8em;
	margin:auto;
	font-weight:normal;
}
ul#menuleft{
	list-style-type:none;
	list-style-position: inside;
}
ul#menuleft li{
	border-bottom: 1px solid #005dfe;
	border-top: 1px solid #34a8ff;
}
ul#menuleft li:hover{
	background-color: rgba(0,0,255,0.3);
}
/* ============================================================================ center ================================================================================*/
#center{
	width:635px;
	float:left;
	margin-left: 335px;
}
#centerleft{
	width:970px;
	float:left;font-size: 15px !important;line-height: 22px !important;
	
}
.blocktitle h1{
	font-size:1em;
	margin: auto;
}
.blocktitle h2{
	font-size:1em;
	margin:auto;
}
#title h1{
	font-size:2.2em;
	color:#000;
}
#banner{
	padding:5px;
	background-color: rgba(0,12,255,0.2);
	float:left;
	line-height: 0px;
	border-radius: 5px;
}

#banner{
	width: 614px;
height: 236px;
}
.video iframe{
	width:100%;
	height:400px;
}
.videomore{
	float:left;
	padding:10px;
	background-color: rgba(0,12,255,0.2);
	line-height: 0px;
	border-radius: 5px;
	margin-right:10px;
}
#centerleft .videomore{
	margin-right:35px;
	margin-top:20px;
}
.videomore img{
	
	width:185px;
	height:150px;
}
div.last{
	margin-right:0px;
}
.newsitem{
	font-size: 16px;
}
.newsitem img{
	width:220px;
	height:120px;
	border: 1px solid #11469d;
	float:left;
	margin-right: 20px;
}
.newstitle a{
	
	color:#fff;
}
.hspace1{
	height:35px;
}
.hspace2{
	height:32px;
}
/* ============================================================================ right ================================================================================*/
#right{
	float:right;
	width:300px;
}
img.ymsupport{
	padding-top:20px;
	padding-bottom:10px;
}
.blockcontent{
	background-color: rgba(0,12,255,0.15);
	padding-bottom:10px;
}
.blockcontent center{
	font-size:1.7em;
}
.blocksubtitle h2{
	margin-top:20px;
	margin-left:20px;
	font-size:2em;
	line-height: 0.2em;
}
.blocksubcontent{
	margin-left:20px;
	font-size:1.2em;
}
/* ============================================================================ footer ================================================================================*/
#footer{
	text-align: center;
width: 100%;
margin-top: 40px;
font-size: 1.5em;
line-height: 1.5em;
}
#email{
	margin-left: 77px;
}
#email a, #email a:hover,#email a:visited{
	color:#fff;
	text-decoration: none;
}
#email a:hover{
	text-decoration: underline;
}



/*
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%

a=4
b=1
n=6
t=30
*/

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 13% {
   opacity:1;visibility:visible;
 }
 16% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 13% {
   opacity:1;visibility:visible;
 }
 16% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 13% {
   opacity:1;visibility:visible;
 }
 16% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;visibility:visible;
 }
 13% {
   opacity:1;visibility:visible;
 }
 16% {
   opacity:0;visibility:hidden;
 }
 96% {
   opacity:0;visibility:hidden;
 }
 100% {
   opacity:1;visibility:visible;
 }
}

#banner img {
-webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 30s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;

position:absolute;
opacity:1;

}

#banner img:nth-of-type(1) {
   -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  -o-animation-delay: 25s;
  animation-delay: 25s;
}
#banner img:nth-of-type(2) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#banner img:nth-of-type(3) {
   -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
}
#banner img:nth-of-type(4) {
   -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}
#banner img:nth-of-type(5) {
   -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
}
#banner img:nth-of-type(6) {
   -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}